<template>
  <q-page class="flex">
    <div class="q-pa-md row items-start q-gutter-md">
      <q-card bordered class="my-card bg-secondary text-white" v-for="machine in machines" :key="machine.mac" style="min-width: 250px">
        <q-card-section>
          <q-list dense >
            <q-item clickable v-ripple @click="machine.needReload?
                    disableMachine(machine,(res)=> machine.needReload = res.needReload):
                    enableMachine(machine, (res)=> machine.needReload = res.needReload)">
              <div class="text-h6">
                  {{ machine.mac }}
                  <q-spinner-hourglass
                    color="white"
                    v-if="machine.needReload"
                  />
                  <q-badge align="top" v-else color="green">DHCP</q-badge>
              </div>
            </q-item>
            <q-item clickable v-ripple>
              <q-item-section>
                  {{ machine.ip }}
              </q-item-section>
                <q-popup-edit v-model="machine.ip" v-slot="scope" @save="(newValue, initialValue)=> updateIp(newValue, initialValue,machine)">
                  <q-input autofocus dense v-model="scope.value" :model-value="scope.value"
                  >
                    <template v-slot:after>
                      <q-btn
                        flat dense color="positive" icon="check_circle"
                        @click.stop.prevent="scope.set"
                        :disable="scope.validate(scope.value) === false || scope.initialValue === scope.value"
                      />
                    </template>
                  </q-input>
                </q-popup-edit>
            </q-item>
            <q-item>
              <q-item-section>
                <q-select @update:model-value="(romPath)=>updateRom(romPath,machine)" dark dense square filled v-model="machine.rom" option-value="path" option-label="name" :options="roms"
                        emit-value @filter="filterFn">
                  <template v-slot:option="scope">
                    <q-item dense v-bind="scope.itemProps">
                      <q-item-section>
                        <q-item-label>{{ scope.opt.name }}</q-item-label>
                        <q-item-label caption>{{ scope.opt.path }}</q-item-label>
                      </q-item-section>
                      <q-item-section side>
                        <q-btn dense flat icon="delete" color="red" square @click="delRom(scope.opt.name)"/>
                      </q-item-section>
                    </q-item>
                  </template>
                  <template v-slot:no-option>
                    <q-item dense clickable @click="newRomDialog = true">
                      <q-item-section>
                        <q-item-label>new one</q-item-label>
                      </q-item-section>
                    </q-item>
                  </template>
                  <template v-slot:after-options>
                    <q-item dense clickable @click="newRomDialog = true">
                      <q-item-section>
                        <q-item-label>new one</q-item-label>
                      </q-item-section>
                    </q-item>
                  </template>
                </q-select>
              </q-item-section>

            </q-item>
          </q-list>
        </q-card-section>
        <q-separator dark inset />
        <q-card-section align="right">
          <q-expansion-item
            dense
            dense-toggle
            expand-separator
            label="操作"
          >
            <q-item>
              <q-btn flat dense icon="autorenew" :loading="rebootMachine.loading" @click="()=>{
                rebootMachine.mac=machine.mac
                rebootDialog = true
              }"></q-btn>
              <q-space/>
              <q-btn flat dense icon="delete" @click="deleteMachine(machine)"></q-btn>
            </q-item>
          </q-expansion-item>
        </q-card-section>
      </q-card>
      <q-btn icon="add" round  color="secondary" @click="newDialogOpen=true"></q-btn>
    </div>
    <q-dialog
      v-model="newDialogOpen"
    >
      <q-card style="width: 700px; max-width: 80vw;">
        <q-card-section>
          <div class="text-h6">又要刷哪台机器啊</div>
        </q-card-section>

        <q-card-section class="q-pt-none">
          <q-form
            @submit="createMachine"
            class="q-gutter-md"
          >
            <q-input filled v-model="newMachine.name" label="别名" lazy-rules
              :rules="[ val => val && val.length > 0 || '随便输点什么都行啊']"
            />
            <q-input filled v-model="newMachine.ip" label="IP" lazy-rules
              :rules="[ val => val && val.length > 0 || '固定IP']"
            />
            <q-input filled v-model="newMachine.router" label="网关" lazy-rules
              :rules="[ val => val && val.length > 0 || '网关']"
            />
            <q-input filled v-model="newMachine.mac" label="mac（大写）" lazy-rules
              :rules="[ val => val && val.length > 0 || 'mac（大写）']"
            />
            <q-input filled v-model="newMachine.subnet" label="subnet" lazy-rules
              :rules="[ val => val && val.length > 0 || '255.255.255.0']"
            />
            <q-select filled v-model="newMachine.rom" option-value="path" option-label="name" :options="roms"
                      label="pxelinux.0位置" emit-value map-options @filter="filterFn">
              <template v-slot:option="scope">
                <q-item v-bind="scope.itemProps">
                  <q-item-section>
                    <q-item-label>{{ scope.opt.name }}</q-item-label>
                    <q-item-label caption>{{ scope.opt.path }}</q-item-label>
                  </q-item-section>
                  <q-item-section side>
                    <q-btn flat icon="delete" color="red" square @click="delRom(scope.opt.name)"/>
                  </q-item-section>
                </q-item>
              </template>
              <template v-slot:no-option>
                <q-item clickable @click="newRomDialog = true">
                  <q-item-section>
                    <q-item-label>new one</q-item-label>
                  </q-item-section>
                </q-item>
              </template>
              <template v-slot:after-options>
                <q-item clickable @click="newRomDialog = true">
                  <q-item-section>
                    <q-item-label>new one</q-item-label>
                  </q-item-section>
                </q-item>
              </template>
            </q-select>
            <div>
              <q-btn label="Submit" type="submit" color="primary"/>
              <q-btn label="Reset" type="reset" color="primary" flat class="q-ml-sm" />
            </div>
          </q-form>
        </q-card-section>
      </q-card>
    </q-dialog>
    <q-dialog
      v-model="rebootDialog"
    >
      <q-card style="width: 300px">
        <q-card-section>
          <div class="text-h6">Reboot</div>
        </q-card-section>

        <q-card-section class="q-pt-none">
          <q-input type="password" dense v-model="rebootMachine.pwd" ></q-input>
        </q-card-section>

        <q-card-actions align="right" class="bg-white text-teal">
          <q-btn flat label="OK" @click="reboot(rebootMachine.mac,rebootMachine.pwd)" :loading="rebootMachine.loading"/>
        </q-card-actions>
      </q-card>
    </q-dialog>
    <q-dialog
      v-model="newRomDialog"
    >
      <q-card style="width: 300px">
        <q-card-section>
          <div class="text-h6">Rom</div>
        </q-card-section>

        <q-card-section class="q-pt-none">
          <q-input dense v-model="newRom.name" ></q-input>
          <q-input dense v-model="newRom.path" ></q-input>
        </q-card-section>

        <q-card-actions align="right" class="bg-white text-teal">
          <q-btn flat label="OK" @click="addRom(()=>{newMachine.rom = newRom.path})"/>
        </q-card-actions>
      </q-card>
    </q-dialog>
  </q-page>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'IndexPage',
  data () {
    return {
      machines: [],
      roms:[],
      rom:{
        name:'',
        path:''
      },
      newRom:{
        name:'',
        path:''
      },
      rebootDialog: false,
      newDialogOpen: false,
      newRomDialog: false,
      pwd:'',
      rebootMachine: {
        loading: false,
        mac: '',
        pwd: ''
      },
      newMachine: {
          name:"demo",
          ip:"",
          router:"",
          mac:"1A:2C:9B:2E",
          rom:"kylinV10/pxelinux.0",
          subnet:""
      }
    }
  },
  methods:{
    getMachines() {
      this.$axios.get("/api/machine/list/").then((res) => {
        this.machines = res
      })
    },
    enableMachine(machine,callback) {
      this.$axios.post("/api/machine/enable_machine/" + machine.mac).then((res) => {
        callback(res)
      })
    },
    disableMachine(machine,callback) {
      this.$axios.post("/api/machine/disable_machine/" + machine.mac).then((res) => {
        callback(res)
      })
    },
    createMachine(){
      this.$axios.post("/api/machine/add_machine/",this.newMachine).then((res)=>{
        this.newDialogOpen = false
        this.getMachines()
      })
    },
    deleteMachine(machine){
      this.$axios.delete("/api/machine/mac/" + machine.mac).then((res) => {
        this.getMachines()
      })
    },
    reboot(mac,pwd){
      this.rebootMachine.loading = true
      this.$axios.post("/api/machine/reboot/" + mac + "/" + pwd).then((res) => {
        this.rebootMachine.loading = false
        this.rebootDialog = false
      },(error)=>{
        this.rebootMachine.loading = false
      })
    },
    updateIp(newValue,oldValue,val){
      val.ip = newValue
      this.$axios.post("/api/machine/ip",val).then((res) => {
      })
    },
    getRoms(){
      this.$axios.get("/api/machine/rom/list").then((res) => {
        this.roms = res
      })
    },
    addRom(rollback){
      this.$axios.post("/api/machine/rom/add",this.newRom).then((res) => {
        this.newRomDialog = false
        rollback()
      })
    },
    delRom(name){
      this.$axios.delete("/api/machine/rom/"+name).then((res) => {
      })
    },
    filterFn(val, update, abort){
      this.$axios.get("/api/machine/rom/list").then((res) => {
        this.roms = res
        update()
      })
    },
    updateRom(rom,machine){
      machine.rom = rom
      this.$axios.post("/api/machine/rom",machine).then((res) => {
      })
    }
  },
  mounted() {
    this.getMachines()
    this.getRoms()
    setInterval(()=>{
      this.getMachines()
    },5000)
  }
})
</script>
